<template>
    <div class="main-content">
       
        <echartsLayout :formState='formState' :dataListState='dataListState' :eCharts1State='eCharts1State' :eCharts2State='eCharts2State' 
        :eCharts3State='eCharts3State' :chartsListState='chartsListState' :tableState='tableState'>
            <div slot="form">
                <el-form :model="formInline" ref="formInline" label-width="76px" :rules="rules">
                    <el-row :gutter="41">
                        <el-col :span="7">
                           <el-form-item label="e学云ID号" prop="eId">
                             <el-input v-model="formInline.eId" placeholder="请输入e学云ID号" :maxlength="9"></el-input>
                           </el-form-item>
                        </el-col>
                        <el-col :span="7">
                             <el-form-item label="姓名">
                             <el-input v-model="formInline.name" placeholder="请输入姓名"></el-input>
                           </el-form-item>
                        </el-col>
                         <el-col :span="7">
                             <el-form-item label="手机号">
                             <el-input v-model="formInline.phone" placeholder="请输入手机号"></el-input>
                           </el-form-item>
                        </el-col>
                    </el-row> 
                     <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="日期">
                                <el-date-picker v-model="formInline.giveTimeStart" :clearable='false' :editable="false" type="date" placeholder="选择日期" 
                                    :picker-options="formInline.pickerOptions1" 
                                     style="width:100%">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3" :offset="14">
                            <div class="top-line">
                                <el-button type="primary" class="btn-common" @click="submit('formInline')">查询</el-button>
                            </div>
                        </el-col>
                    </el-row> 

                </el-form>
            </div> 
             <div slot="table">
                <div class="table-title">
                   <span class="table-title-span">
                        <exportExcel @ee="exportFile"></exportExcel>
                    </span>
                </div> 
                <el-table border style="width: 100%" :data="AnnounceList" v-loading="loading"  @sort-change="sortChange">
                 <el-table-column align="center" label="e学云ID号">
                    <template scope="scope">
                        {{scope.row.code?scope.row.code:'--'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="姓名">
                     <template scope="scope">
                        {{scope.row.name?scope.row.name:'--'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" sortable="custom" label="积分获取量" prop="score">
                     <template scope="scope">
                        {{scope.row.score?scope.row.score:'--'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="手机号">
                     <template scope="scope">
                        {{scope.row.phone?scope.row.phone:'--'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="日期">
                      <template scope="scope">
                        {{scope.row.time?scope.row.time.substring(0,19):'--'}}
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total" :current-page.sync="listQuery.page" :page-sizes="config.pageSizes" 
                :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
            </div>
        </echartsLayout>
    </div>
</template>

<script>
    
    import { mapState, mapActions, mapGetters } from 'vuex';
    import echartsLayout from 'components/TableLayout/echartsLayout'; 
    import trendChart from 'components/Charts/trendChart';
    import {queryPointDayInfo} from 'api/pingtaifenxi';
    import validate from '@/utils/validate';
    import moment from 'moment';
    import exportExcel from 'components/ExportExcel/index'; 
    export default{
        components: { exportExcel, echartsLayout, trendChart},
        data() {
            return {
                formState: false,
                dataListState: true,
                eCharts1State: false,
                eCharts2State: true,
                eCharts3State: true,
                chartsListState: true,
                tableState: false,
                formInline: {
                    eId: '',
                    name: '',
                    phone: '',
                    giveTimeStart: moment(new Date()).format('YYYY-MM-DD'),
                    pickerOptions1: {
                        disabledDate(time) {
                            return (time.getTime()) > (Date.now());
                        }
                    }
                },
                rules: {
                    eId: [...validate.exueCode()]
                },
                loading: true,
                AnnounceList: [],
                listQuery: {// 分页
                    page: 1,
                    total: 0
                },
                scoreStatus: 1 // 积分排序 0.升序 1.降序”, （不必填）
            }
        },
        computed: {
            
            ...mapState({
                config: state => state.config.table
            }),
            ...mapGetters([
                'uid'
            ])
        },
        created() {
            this.searchFetchData();
        },
        methods: {
            // 全局获取行数
            ...mapActions(['ChangePageSize']),
            submit(ruleForm) {
                this.$refs[ruleForm].validate((valid) => {
                    if (valid) {
                        this.listQuery.page = 1;
                        this.searchFetchData();
                    } else {
                        return false;
                    }
                });
            },
            searchFetchData() {
                this.loading = true;
                let curPage = this.listQuery.page;
                let pageSize = this.config.pageSize;
                let time=moment(this.formInline.giveTimeStart).format('YYYY-MM-DD'); 
                let code=this.formInline.eId;
                let name=this.formInline.name;
                let phone=this.formInline.phone;
                let scoreStatus=this.scoreStatus;
                queryPointDayInfo(curPage, pageSize, time, code, name, phone, scoreStatus).then(res => {
                    this.loading = false;
                    this.loadingChart = false;
                    this.AnnounceList = res.data.content.list;
                    this.listQuery.total = res.data.content.pagination?res.data.content.pagination.total:0;
                    // 拿出图表的数据
                }).catch(() => {
                    this.loading = false;
                    // this.loadingChart = false;
                });
            },
            exportFile() {
                let time=moment(this.formInline.giveTimeStart).format('YYYY-MM-DD'); 
                let code=this.formInline.eId;
                let name=this.formInline.name;
                let phone=this.formInline.phone;
                let scoreStatus=this.scoreStatus;
                window.location.href = `${LOCAL_API.scy}/report/outExcelByPointDayInfo?time=${time}&code=${code}&name=${name}&phone=${phone}&scoreStatus=${scoreStatus}`
                // window.location.href = `http://192.168.121.29:8084/exue-operation-analysis-web/analysis/report/outExcelByPointDayInfo?time=${time}&code=${code}&name=${name}&phone=${phone}&scoreStatus=${scoreStatus}`
            },
             // 分页
            handleSizeChange(val) {
                this.listQuery.page = 1;
                this.loading = true;
                this.ChangePageSize(val);
                this.searchFetchData();
            },
            handleCurrentChange(val) {
                this.loading = true;
                this.listQuery.page = val;
                this.searchFetchData();
            },
            sortChange({ column, prop, order }) {
            // 原型默 日期倒敘
                this.scoreStatus=prop=='score'?order=='ascending'?0:1:'';
                this.searchFetchData()
            }
        }
    }
</script>
